// 选题页面的 选题的组件
import { useState } from 'react'
import './selectitem.less'

interface IProp {
  // 要求父组件传递一个数组，数组里面是两个数据，一个是英文（value），一个是中文(key) ， 组成对象
  list: IKeyValue[];
  onChange: (value: string) => void;
  title: string;
}

export default function SelectItem({ list, onChange, title }: IProp) {
  // 使用一个索引标识当前哪个是 高亮的
  const [index, setIndex] = useState(0)

  const clickHanle = (value: string, index: number) => {
    setIndex(index);
    onChange(value);
  }

  return (
    <div className="select-item">
      <h4>{title}</h4>
      <ul>
        {
          list.map((item, idx) => <li key={item.key} onClick={() => clickHanle(item.value, idx)} className={idx === index ? 'active' : ''}>{item.key}</li>)
        }

      </ul>
    </div>
  )
}
